<template>
    <div>
        <div class="banner">
            <img src="@/assets/images/index/banner.jpg" alt="" srcset="">
        </div>
        <div class="main">
            <div class="container">
                <form class="content-form">
                    <div class="content-form-title">
                        <h3>联系我们</h3>
                        <small>Contact us</small>
                    </div>
                    <div class="content-form__address">
                        福州高新区海西园科技东路10号 中青大厦17层
                    </div>
                    <div class="content-form__tel">
                        0591-22865560
                    </div>
                    <div class="content-form__url">
                        www.xunketech.com
                    </div>
                    <div class="form-group">
                        <label for="email">您的Email</label>
                        <input type="text" id="email">
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" id="name">
                    </div>
                    <div class="form-group">
                        <label for="subject">主题</label>
                        <input type="text" id="subject">
                    </div>
                    <div class="form-group">
                        <label for="text">正文</label>
                        <textarea id="text"></textarea>
                    </div>
                    <div class="btn-row">
                        <div class="btn" @click="handleSendEmail">发送邮件</div>
                    </div>
                    
                </form>
                <div class="map" id="map">

                </div> 
            </div>
        </div>
    </div>
</template>

<script>
export default {
    head: {
        script: [
            {
                src: "http://api.map.baidu.com/getscript?v=2.0&ak=nqwyPPojPTKXqRGQO1Gwb77SecKMy6MN&services=",
                type: "text/javascript"
            }
        ]
    },
    methods: {
        handleSendEmail() {
            alert('发送成功！')
        },
        initMap() {
            let map = new BMap.Map("map");
            let point = new BMap.Point(119.223036,26.048143);
            map.centerAndZoom(point, 15);
            let marker = new BMap.Marker(point);  // 创建标注
            map.addOverlay(marker);               // 将标注添加到地图中
            marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
            map.enableScrollWheelZoom(true)
        },
        checkMapExist() {
            setTimeout(() => {
                console.log('checking BMap')
                if(window.BMap) {
                    this.initMap()
                }else{
                   this.checkMapExist() 
                }
            },500)
        }
    },
    mounted() {
        this.checkMapExist()
    },
}
</script>

<style scoped lang="less">
.banner{
    img{
        max-width: 100%;
    }
}
.main{
    line-height: 1;
    .container{
        position: relative;
        z-index: 999;
        min-height: 100px;
        background: #fff;
        margin-top: -150px;
        box-shadow:2px 2px 27px 0px rgba(184,184,184,0.58);
        display: flex;
    }
    .content-form, .map{
        width: 50%;

    }
    .content-form{
        &-title{
            margin: 68px 0 40px 0;
            text-align: center;
            h3{
                color:rgba(102,102,102,1);
                font-size: 40px;
                margin-bottom: 20px;
            }
            small{
                font-size: 20px;
                color:rgba(0,144,255,1);
            }
        }
        &__address{
            text-align: center;
            font-size: 20px;
            line-height: 31px;
            color: #666;
        }
        &__tel, &__url{
            text-align: center;
            line-height:35px;
            color:rgba(102,102,102,1);
            font-size: 20px;
        }
        &__url{
            margin-bottom: 50px;
        }
        .btn-row{
            text-align: center;
            font-size: 0;
            margin-bottom: 50px;
           .btn{
               display: inline-block;
                padding: 14px 40px;
                background: #F6211D;
                color: #fff;
                font-size: 16px;
                border-radius: 40px;
                cursor: pointer;
            } 
        }
        
    }
}
.form-group{
    margin-bottom: 40px;
    label{
        display: block;
        text-align: center;
        color: #999999;
        font-size: 20px;
        margin-bottom: 12px;
    }
    input, textarea{
        display: block;
        width: 360px;
        height: 48px;
        margin: 0 auto;
        outline: none;
        box-sizing: border-box;
        border-radius: 48px;
        border: 0;
        background: #EFEFEF;
        padding-left: 48px;
    }
    textarea{
        height: 120px;
        box-shadow:0px 5px 10px 0px rgba(167,167,167,0.61);
        border-radius: 6px;
        background: #fff;
        resize: none;
        padding: 5px;
    }
}
@media screen and (max-width: 480px) {
    .banner{
        display: none;
    }
    .main{
        margin: 0;
        padding: 0;
        .container{
            flex-direction: column-reverse;
            margin: 0;
        }
        .content-form, .map{
            width: 100%;
            min-height: 200px;
        }
    }
}
</style>
